<template>
  <van-pull-refresh
    v-model="loading"
    @refresh="onRefresh"
    success-text="刷新成功"
  >
    <div class="bg">
      <search-tab></search-tab>
      <category-menu></category-menu>
      <div class="swiper_bg mt1">
        <img src="@/assets/huanbei_swiper.jpg" />
      </div>
      <product-list></product-list>
      <p class="tc">已经到底啦~</p>
    </div>
  </van-pull-refresh>
</template>
<script>
import CategoryMenu from './CategoryMenu.vue'
import ProductList from './ProductList.vue'
import SearchTab from './SearchTab.vue'
import { PullRefresh, Icon } from 'vant'
import { ref } from 'vue'

export default {
  components: {
    SearchTab,
    CategoryMenu,
    ProductList,
    [PullRefresh.name]: PullRefresh,
    [Icon.name]: Icon,
  },
  setup() {
    const count = ref(0)
    const loading = ref(false)
    const onRefresh = () => {
      setTimeout(() => {
        loading.value = false
        location.reload()
      }, 1000)
    }
    return {
      count,
      loading,
      onRefresh,
    }
  },
}
</script>
<style scoped>
.global_bg {
  padding: 0 0 3.5rem 0;
}
.swiper_bg {
  width: 100%;
  height: 8rem;
}
.swiper_bg > img {
  width: 100%;
  height: 100%;
}
</style>
